<template>
<div id="app">
    <div class="qw">
        <div class="z" v-if="type==1">
            <div class="tittle">
                <div class="a" @click="shouye()">跳过</div>
            </div>
            <div class="q">
                <img src="../img/未标题-11.jpg" alt="">
            </div>
        </div>
        <div class="z" v-else-if="type==2">
            <div class="tittle">
                <div class="a" @click="shouye()">跳过</div>
            </div>
            <div class="q">
                <img src="../img/未标题-12.jpg" alt="">
            </div>
        </div>
        <div class="z" v-else-if="type==3">
            <div class="tittle">
                <div class="a" @click="shouye()">跳过</div>
            </div>
            <div class="q" >
                <img src="../img/未标题-13.jpg" alt="">
            </div>
        </div>
       
    </div>
   
    <div class="w">
        <input type="radio" @click="type=1">
        <input type="radio" @click="type=2">
        <input type="radio" @click="type=3;a=true">
        <div class="az" v-show="a" @click="shouye()">立刻体验</div>
    </div>
</div>
</template>

<script>
export default {
data() {
          return {
            isShow: false,
            type: 1,
            a:false,
            
          };
},
methods:{
    
    shouye(){
        this.$router.push("/home/homes")
    }

}
}
</script>

<style scoped>
    #app{
        width: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        height: 100%;
    }
    .tittle{
        /* width: .64rem;
        height: .29rem; */
        width: 100%;
        height: 0.2rem;
        
    }
    .a{
        width: .64rem;
        height: .29rem;
        border-radius: .4rem;
        font-size: .2rem;
        background-color: #D8D8D8;
        color: #fff;
        text-align: center;
        float: right;
        margin-right: 0.2rem;
    }
    .w{
        position: relative;
    }
    .az{
        width: 1rem;
        height: 0.3rem;
        background-color: aqua;
        font-size: .2rem;
        position: absolute;
    }
    .q img{
        padding: 0 0.23rem;
        width: 3.07rem;
        height: 5.86rem;
    }
    .w{
        width: 1rem;
        height: 0.3rem;
        font-size: .3rem;
        position: absolute;
        bottom: .4rem;
        left:1.56rem ;
    }
    .w :nth-child(1){
        margin-right: .1rem;
    }
    .w :nth-child(3){
        margin-left: .1rem;
    }
    .w :nth-child(4){
         width: 2rem;
        position: absolute;
        top: 0;
        right: -.35rem;
        text-align: center;
        line-height: .3rem;
        border-radius: .3rem;
    }
</style>